<template>
  <view class="resume-page" :style="{ height: navBarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
    <view class="title">简历模板</view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">正在加载模板...</text>
    </view>

    <!-- 模板列表 -->
    <view v-else class="template-grid">
      <view class="template-card" v-for="template in templateList" :key="template.id"
        @click="handleTemplateClick(template)">
        <!-- VIP角标 -->
        <view class="vip-badge" v-if="template.isPremium"></view>
        <view class="template-color" :style="{ background: template.color, padding: '20px 10px', borderRadius: '8px' }">
          <image class="template-thumbnail" :style="{ borderRadius: '6px' }" :src="template.previewImageUrl"
            mode="widthFix" @error="handleImageError" />
        </view>
        <view class="template-name">
          <text class="template-name-text">{{ template.name }}</text>
        </view>
        <text class="template-downloads">{{ template.downloadCount }} 下载</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="!loading && templateList.length === 0" class="empty-state">
      <text class="empty-text">暂无简历模板</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useNavBar } from '@/hooks/useNavBar'
import { getResumeTemplates, downloadResumeTemplate, getResumeTemplateDetail, type ResumeTemplate } from '@/api/resume'

const { statusBarHeight, navBarHeight } = useNavBar()

// 响应式数据
const loading = ref(false)
const templateList = ref<ResumeTemplate[]>([])

// 获取简历模板列表
const fetchTemplates = async () => {
  try {
    loading.value = true
    const response = await getResumeTemplates()
    templateList.value = response.data || []
    console.log('获取模板列表成功:', response)
  } catch (error) {
    console.error('获取模板列表失败:', error)
    uni.showToast({
      title: '获取模板失败',
      icon: 'error'
    })
  } finally {
    loading.value = false
  }
}

// 处理模板点击
const handleTemplateClick = async (template: ResumeTemplate) => {
  try {
    // 先调用接口获取模板详情
    const response = await getResumeTemplateDetail(template.id)
    const templateDetail = response.data
    
    // 跳转到模板详情页面，传递完整的模板信息
    uni.navigateTo({
      url: `/pages/template-detail/template-detail?id=${templateDetail.id}&name=${encodeURIComponent(templateDetail.name)}&previewImageUrl=${encodeURIComponent(templateDetail.previewImageUrl)}&downloadCount=${templateDetail.downloadCount}&color=${templateDetail.color}&viewCount=${templateDetail.viewCount || 0}`
    })
  } catch (error) {
    console.error('获取模板详情失败:', error)
    uni.showToast({
      title: '获取模板详情失败',
      icon: 'error'
    })
  }
}

// 处理图片加载错误
const handleImageError = (e: any) => {
  console.log('图片加载失败:', e)
  // 可以设置默认图片
}

// 页面加载时获取模板列表
onMounted(() => {
  fetchTemplates()
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
}

.resume-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;

  .loading-text {
    font-size: 28rpx;
    color: #6b7280;
  }
}

// 模板网格布局
.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  padding: 20px;
}

.template-card {
  // background-color: #fff;
  border-radius: 12rpx;
  // box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
  position: relative;

  &:active {
    transform: scale(0.98);
  }

  .vip-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 60rpx;
    height: 60rpx;
    z-index: 10;
    background: #ffd700;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-top-right-radius: 12rpx;

    &::after {
      content: 'VIP';
      position: absolute;
      top: 8rpx;
      right: 4rpx;
      color: #fff;
      font-size: 18rpx;
      font-weight: bold;
      transform: rotate(45deg);
      transform-origin: center;
    }
  }
}

.template-thumbnail {
  width: 100%;
  border-radius: 8rpx;
  display: block;
}

.template-name {
  display: block;
  font-size: 34rpx;
  font-weight: 600;
  color: #38465a;
  margin-bottom: 8rpx;
  line-height: 1.3;
  padding: 10px 0px 0 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-downloads {
  display: block;
  font-size: 24rpx;
  color: #6b7280;
}

// 空状态
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;

  .empty-text {
    font-size: 28rpx;
    color: #9ca3af;
  }
}
</style>